<template>
	<view class="page_wrap">
		<custom-header title="设置" />
		<view 
			hover-class="custom_hover"
			:hover-stay-time="200"
			class="nav nav01"
			@click="handleBusinessInfo">
			<view class="left">
				<view class="icon">
					<image src="/static/set/icon01.png" mode=""></image>
				</view>
				<view class="text">商家资料</view>
			</view>
			<view class="right">
				<image src="/static/common/right1.png" mode=""></image>
			</view>
		</view>
		<view 
			hover-class="custom_hover"
			:hover-stay-time="200"
			class="nav nav02"
			@click="handleAccountSecurity">
			<view class="left">
				<view class="icon">
					<image src="/static/set/icon02.png" mode=""></image>
				</view>
				<view class="text">账号安全</view>
			</view>
			<view class="right">
				<image src="/static/common/right1.png" mode=""></image>
			</view>
		</view>
		<view 
			hover-class="custom_hover"
			:hover-stay-time="200"
			class="nav nav03">
			<view class="left">
				<view class="icon">
					<image src="/static/set/icon03.png" mode=""></image>
				</view>
				<view class="text">隐私政策</view>
			</view>
			<view class="right">
				<image src="/static/common/right1.png" mode=""></image>
			</view>
		</view>
		<view 
			hover-class="custom_hover"
			:hover-stay-time="200"
			class="nav nav04">
			<view class="left">
				<view class="icon">
					<image src="/static/set/icon04.png" mode=""></image>
				</view>
				<view class="text">用户协议</view>
			</view>
			<view class="right">
				<image src="/static/common/right1.png" mode=""></image>
			</view>
		</view>
		<view 
			hover-class="custom_hover"
			:hover-stay-time="200"
			class="nav nav05">
			<view class="left">
				<view class="icon">
					<image src="/static/set/icon05.png" mode=""></image>
				</view>
				<view class="text">卖家入驻协议</view>
			</view>
			<view class="right">
				<image src="/static/common/right1.png" mode=""></image>
			</view>
		</view>
		<view 
			hover-class="custom_hover"
			:hover-stay-time="200"
			class="nav nav06">
			<view class="left">
				<view class="icon">
					<image src="/static/set/icon06.png" mode=""></image>
				</view>
				<view class="text">版本号</view>
			</view>
			<view class="right">
				<image src="/static/common/right1.png" mode=""></image>
			</view>
		</view>
		<view 
			hover-class="custom_hover"
			:hover-stay-time="200"
			class="nav nav07"
			@click="handleLogout">
			<view class="left">
				<view class="icon">
					<image src="/static/set/icon07.png" mode=""></image>
				</view>
				<view class="text">退出登录</view>
			</view>
			<view class="right">
				<image src="/static/common/right1.png" mode=""></image>
			</view>
		</view>
	</view>
	<!-- 自定义确认弹出层 -->
	<custom-popup 
		:show="isShowPopup" 
		:config="popupConfig"
		@cancel="handlePopupCancel" 
		@confirm="handlePopupConfirm">
	</custom-popup>
	<!-- 自定义消息弹出层 -->
	<custom-popup
		:show="isShowToast" 
		:config="popupConfig"
		@confirm="isShowToast = false">
	</custom-popup>
</template>

<script setup>
	import { ref } from 'vue'
	
	// 弹窗提示
	const isShowToast = ref(false)
	const isShowPopup = ref(false)
	const popupConfig  = ref({})
	const handlePopupCancel = (data)=>{
		isShowPopup.value = false
	}
	const handlePopupConfirm = (data)=>{
		setTimeout(()=>{
			isShowPopup.value = false
			// 退出登录
			if(data.type == 'logout'){
				uni.navigateTo({ url:'/pages/login/login' })
			}
		},3*1000)
	}
	
	// 商家资料
	const handleBusinessInfo = ()=>{
		uni.navigateTo({
			url:'/pages/businessInfoNew/businessInfoNew'
		})
	}
	// 账号安全
	const handleAccountSecurity = ()=>{
		uni.navigateTo({
			url:'/pages/accountSecurity/accountSecurity'
		})
	}
	// 退出登录
	const handleLogout = ()=>{
		
		isShowPopup.value = true
		popupConfig.value = {
			message:'确定要退出登录吗？',
			showCancel:true,
			data:{
				type:'logout'
			}
		}
		
		// uni.navigateTo({
		// 	url:'/pages/login/login'
		// })
	}
</script>

<style lang="scss">
	.page_wrap{
		min-height: 100vh;
		background: #fff;
	}
	.nav{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 25rpx 30rpx;
		.left{
			display: flex;
			align-items: center;
			.icon{
				width: 36rpx;
				height: 38rpx;
				line-height: 38rpx;
				display: flex;
				align-items: center;
			}
			.text{
				color: #555555;
				font-size: 32rpx;
				padding-left: 15rpx;
			}
		}
		.right{
			width: 20rpx;
			height: 20rpx;
			display: flex;
		}
	}
	.nav01 .left .icon image{
		width: 36rpx;
		height: 33rpx;
	}
	.nav02 .left .icon image{
		width: 37rpx;
		height: 38rpx;
	}
	.nav03 .left .icon image{
		width: 33rpx;
		height: 36rpx;
	}
	.nav04 .left .icon image{
		width: 34rpx;
		height: 36rpx;
	}
	.nav05 .left .icon image{
		width: 34rpx;
		height: 36rpx;
	}
	.nav06 .left .icon image{
		width: 37rpx;
		height: 37rpx;
	}
	.nav07 .left .icon image{
		width: 36rpx;
		height: 37rpx;
	}
	.nav03{
		margin-top: 50rpx;
	}
</style>
